<template>
  <div class="tab-bar-item" @click="itemClick">
    <!-- 图标 -->
    <div v-if="!isActive">
      <slot name="bar-item-icon"></slot>
    </div>
    <div v-else>
      <slot name="bar-item-icon-active"></slot>
    </div>

    <!-- 文字 -->
    <div :style="activeStyle">
      <slot name="bar-item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabBarItem",

  props: {
    // 点击后跳转的路由
    linkPath: String,
    // 点击后改变的文字颜色
    activeColor: {
      type: String,
      default: "1296db",
    },
  },

  data() {
    return {
      // isActive: false,
    };
  },

  computed: {
    // 计算属性: 是否活跃
    isActive() {
      // 通过indexOf() 查看当前活跃路由是否包含外部传递的linkPath
      // 包含返回对应下标
      // 不包含返回 -1
      // 也就是说当indexOf返回不等于-1时当前isActive应该返回true
      return this.$route.path.indexOf(this.linkPath) != -1;
    },

    // 文字颜色 >>> 判断是否处于活跃设置
    activeStyle() {
      return this.isActive ? { color: this.activeColor } : "";
    },
  },

  methods: {
    itemClick() {
      if (this.$route.path.indexOf(this.linkPath) == -1) {
        this.$router.replace(this.linkPath);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tab-bar-item {
  flex: 1;
  font-size: 14px;

  img {
    width: 24px;
    height: 24px;
    margin: 2px 0;
    vertical-align: middle;
  }
}
</style>